<html lang="en">
<head>
	<!-- <script type="text/javascript" src="js/run-prettify.js"></script> -->
	<link rel="stylesheet" type="text/css" href="css/prettify.css" />
	<link rel="stylesheet" type="text/css" href="css/impress.css" />
	<script type="text/javascript" src="js/prettify.js"></script>
</head>
<body class="impress-not-supported" onload="prettyPrint()">

	<div id="impress">
		
		<div id="start" class="step" >
			<p class="headline">Objektorentierte Programmierung </br>
			in Javascript. </br>
			Der Blick ins Innere</p>
			&emsp;</br>
			<p class='footer'>Slide 1 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>

		<div id="slide1" class="step" data-x="-1600">
			<p class="headline">Motivation</p>
			&emsp;</br>
			<p class='footer'>Slide 2 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide2" class="step" data-x="1600">
			<p class='headline'>Inhalt</p>
			1. Object</br>
			2. Konstruktorfunktion</br>
			3. Vererbung</br>
			&emsp;</br>
			<p class='footer'>Slide 3 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		<!--  Kitty Jane kitty -->
		
		
		<div id="slide3" class="step" data-y="-1600">
			<p class="head">1. Object</p>
			1. Festimplemetierte Objekte</br>
			2. Direkt erzeugte Objekte</br>
			3. Objekt Literale</br>
			&emsp;</br>
			<p class='footer'>Slide 4 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide4" class="step" data-x="1600" data-y="1600">
			<p class="head">1. Object</p>
			<p class= "headline">Festimplementierte Objekte</p>
			1. Object</br>
			2. String, Array, Number ...</br>
			3. window, document, form ...</br>
			&nbsp;</br>
			<p class='footer'>Slide 5 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide5" class="step" data-x="1600" data-y="-1600">
			<p class="head">1. Object</p>
			<p class= "headline">Direkt erzeugte Objekten</p>
			<pre class="prettyprint lang-javascript">
var obj = new Object();

obj.eigenschaft = "Property";

obj.methode = function(){
	console.log("Methode");
};
			</pre>
			<p class='footer'>Slide 6 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
			</br>
			</br>
		</div>



		<div id="slide6" class="step" data-x="3600" data-rotate="90">
			<p class="head">1. Object</p>
			<p class= "headline">Zugriff</p>
			<pre class="prettyprint lang-javascript">
console.log(obj.eigenschaft); //Property
obj.methode(); //Methode
console.log(obj.prototype);//undefine
obj.constructor.a = "a";
console.log(Object.a);//a

			</pre>
			<p class='footer'>Slide 7 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide7" class="step" data-x="6200" data-scale='3'>
			<p class="head">1. Object</p>
			<p class= "headline">Objekt Literal</p>
			<pre class="prettyprint lang-javascript">
var obj = {
   eigenschaft : "Property",
   methode : function(){
      console.log("Methode");},
   verschachtelt : {
      innere : "innereProperty",
      innereMethode : function(){
         console.log("innereMethode");}}};
			</pre>
			<p class='footer'>Slide 8 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide8" class="step" data-x="7800" data-y='2000' data-z='1500'>
			<p class="head">1. Object</p>
			<p class= "headline">Zugriff Teil 1</p>
			<pre class="prettyprint lang-javascript">
console.log(obj.eigenschaft); //Property
obj.methode(); //Methode
console.log(obj.verschachtelt.innere);
//innereProperty
obj.verschachtelt.innereMethode();
//innereMethode
</pre>
			<p class='footer'>Slide 9 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide9" class="step" data-x="4900" data-y='1500' data-z='100'>
			<p class="head">1. Object</p>
			<p class= "headline">Zugriff Teil 2</p>
			<pre class="prettyprint lang-javascript">
console.log(obj["eigenschaft"]); 
//Property
obj["methode"](); //Methode
console.log(obj["verschachtelt"]["innere"]);
//innereProperty
obj["verschachtelt"]["innereMethode"]();
//innereMethode
</pre>
			<p class='footer'>Slide 10 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>



		<div id="slide10" class="step" data-x="9000" data-y='4000' data-z='-1500'>
			<p class="head">1. Object</p>
			<p class= "headline">Erweiterung</p>
			<pre class="prettyprint lang-javascript">
//Object
obj.neuEigenschaft = "new property";

//Objektliterale
obj.verschachtelt.neuEigenschaft = 
                         "new property";
			</pre>
			<p class='footer'>Slide 11 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>




		<div id="slide11" class="step" data-y="11000">
			<p class="head">2.Konstruktorfunktion</p>
			1. Konstruktorfunktion erzeugen</br>
			2. Globale</br>
			3. Private</br>
			4. Public</br>
			5. constructor Eigenschaft
			&emsp;</br>
			<p class='footer'>Slide 12 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>

		<div id="slide12" class="step" data-x="12000" data-y='6000' data-scale='10'>
			<p class="head">2.Konstruktorfunktion</p>
			<p class= "headline">Konstruktorfunktion</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "property";
   this.methode = function(){
      console.log("methode");}}
var obj = new konstruktor();
console.log("obj.eigenschaft");//property
obj.methode();//methode
			</pre>
			<p class='footer'>Slide 13 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide13" class="step" data-x='19200' >
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Erzeugen</p>
			<pre class="prettyprint lang-javascript">
var konstruktor = function(){
   //TODO
};
function konstruktor(){
   //TODO
}
function konstructor(){}
var konstruktor = function(){};
var obj = {};
//spaeter erweitern
			</pre>
			<p class='footer'>Slide 14 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide14" class="step" data-x='20800'>
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Global</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   eigenschaft = "Global";
   methode = function(){
      console.log("Global");}}
console.log(eigenschaft);//Global
console.log(window.eigenschaft);//Global
methode();//Global
window.methode();//Global
obj = new konstruktor();
console.log(obj.eigenschaft);//undefine
			</pre>
			<p class='footer'>Slide 15 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide15" class="step" data-x='22400'>
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Private</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   var eigenschaft = "Private";
   var methode = function(){
      console.log("Private");}
   //oder
   function methode2(){
      console.log("Private");}}
var obj = new konstruktor();
console.log(obj.eigenschaft); //undefine
obj.methode(); //undefine
obj.methode2(); //undefine
			</pre>
			<p class='footer'>Slide 16 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide16" class="step" data-x='24000'>
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Public</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "Public";
   this.methode = function(){
      console.log("Public");
   }
}
var obj = new konstruktor();
console.log(obj.eigenschaft); //Public
obj.methode(); //Public
			</pre>
			<p class='footer'>Slide 17 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide17" class="step" data-x='25600'>
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">Objekt-Erweiterung</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.eigenschaft = "Public";
   this.methode = function(){
      console.log("Public");}}
var obj = new konstruktor();
var obj2 = new konstruktor();
obj.neuEigenschaft = "NEU";
console.log(obj.neuEigenschaft);//NEU
console.log(obj2.neuEigenschaft);//undefine
console.log(obj2.eigenschaft);//Public
			</pre>
			<p class='footer'>Slide 18 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide18" class="step" data-x='27200'>
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">constructor</p>
			<pre class="prettyprint lang-javascript">
function konstruktor(){
   this.constructor.count++;
   this.constructor.a = "Property";
}
konstruktor.count = 0;
var obj_1 = new konstruktor();
var obj_2 = new konstruktor();
var obj_3 = new konstruktor();
console.log(konstruktor.count);//3
			</pre>
			<p class='footer'>Slide 19 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide19" class="step" data-x='29000' >
			<p class="head">2. Konstruktorfunktion</p>
			<p class= "headline">constructor</p>
			<pre class="prettyprint lang-javascript">
obj_1.a = "etwas anderes";
console.log(obj_1.a);// etwas anderes
console.log(konstruktor.constructor.a);
// Property
			</pre>
			<p class='footer'>Slide 20 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide20" class="step" data-x='30800' >
			<p class="head">3. Vererubung</p>
			1. prototype</br>
			2. Konstruktorfunktion erweitern</br>
			3. Vererbung</br>
			4. 
			<p class='footer'>Slide 21 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide21" class="step" data-x='32400' data-y='6800' date-z='5000'>
			<p class="head">3. Vererbung</p>
			<p class= "headline">Prototyp in Technik </p>
			Ein Prototyp stellt in der Technik ein f&uumlr die jeweiligen
			Zwecke funktionsf&aumlhiges, oft aber auch vereinfachtes 
			Versuchsmodell eines geplanten Produktes oder Bauteils dar.
			(Wikipedia)
			
			<!--<pre class="prettyprint lang-javascript">
function Mann(){
   this.geschlecht = "männlich";
   this.print = function(){
      console.log(geschlecht);
   }
}
			</pre>-->
			<p class='footer'>Slide 22 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<div id="slide22" class="step" data-x='24000' data-y='6800' date-z='5000'>
			<p class="head">3. Vererbung</p>
			<p class= "headline"></p>
			 Prototypenbasierte Programmierung, auch als klassenlose 
			 Objektorientierung bekannt, ist eine Form der Objektorientierten 
			 Programmierung, die auf das Sprachelement der Klasse verzichtet. 
			 Objekte werden nicht bei der Kompilation, sondern erst zur Laufzeit 
			 durch Klonen bereits existierender Objekte erzeugt.
			<p class='footer'>Slide 23 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>
		
		
		
		<!--<div id="slide21" class="step" data-x='20000' data-y='6800' date-z='5000'>
			<p class="head">1. Object</p>
			<p class= "headline">Konstruktorfunktion</p>
			<p class='footer'>Slide 24 von 20 &emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			HS-Weingarten Gennadi Heimann</p>
		</div>-->
	</div>
	
	<script type="text/javascript" src="js/run-prettify.js"></script>
	<script type="text/javascript" src="js/impress.js"></script>
	<script type="text/javascript">impress().init();</script>
	
</body>
</html>